<template>
  <el-dialog
    :close-on-click-modal="false"
    title="导入Excel"
    :visible.sync="visible"
    @close="close"
  >
    <el-form ref="form" :model="form" label-width="auto">
      <el-form-item label="模版下载：">
        <el-button type="primary" @click="toDownload">点击下载</el-button>
      </el-form-item>
      <el-form-item
        label="选择文件："
        prop="excel"
        :rules="{
          required: true,
          message: '请选择文件',
        }"
      >
        <input type="file" @change="handleFileChange" accept=".xlsx, .xls" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="confirm">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import ncWaterQualityApi from "@/api/module/ncWaterQuality";
import { mymixin } from "@/utils/mixin";
export default {
  mixins: [mymixin],
  components: {},
  props: {
    currentItem: {
      type: Object,
      required: false,
      default: () => {
        return null;
      },
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formDefault: {
        excel: "",
      },
      form: {},
      visible: false,
      loading: false,
    };
  },
  watch: {
    value(v) {
      this.visible = v;
      if (v) {
        this.init();
      }
    },
  },
  created() {
    this.reset();
  },
  methods: {
    reset() {
      this.form = { ...this.formDefault };
      this.$refs.form && this.$refs.form.resetFields();
    },
    init() {
      const { currentItem, form } = this;
      if (currentItem) {
        Object.keys(form).forEach((key) => {
          if (currentItem.hasOwnProperty(key)) {
            form[key] = currentItem[key];
          }
        });
        form.content = "";
      }
    },
    handleFileChange(event) {
      const selectedFile = event.target.files[0];
      const allowedExtensions = /(\.xlsx|\.xls)$/i;
      if (!allowedExtensions.exec(selectedFile.name)) {
        alert("只能上传 Excel 文件.");
        event.target.value = ""; // 清空输入框
        this.file = null; // 清空文件数据
        return;
      }
      this.form.excel = selectedFile;
    },
    // 关闭
    close() {
      setTimeout(() => {
        this.reset();
      }, 250);
      this.$emit("close");
    },
    // 取消
    cancel() {
      this.$emit("input", false);
    },
    // 确认
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { form } = this;
          const formData = new FormData();
          formData.append("excel", form.excel);
          this.loading = true;
          ncWaterQualityApi
            .excelImport(formData)
            .then((res) => {
              this.$message({
                type: "success",
                message: "上传成功",
              });
              this.close();
              this.$emit("reflash");
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    toDownload() {
      ncWaterQualityApi.downloadTemplate().then((res) => {
        console.log(res);
        this.getFileNameAndDownload(res);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
